<template>
  <div class="help">
    <div class="block or2" @click="dialogVisible1=true">
      <div class="integral_block_title">吃什么？</div>
      <div class="integral_block_img"><img src="@/assets/imgs/吃好吃的.png"></div>
      <div class="integral_block_desc">不知道吃什么？我帮你决定！</div>
    </div>
    <div class="block or3" @click="dialogVisible2=true">
      <div class="integral_block_title">做不做？</div>
      <div class="integral_block_img"><img src="@/assets/imgs/做不做.png"></div>
      <div class="integral_block_desc">不知道做不做？我帮你决定！</div>
    </div>
    <div class="block or4" @click="dialogVisible3=true">
      <div class="integral_block_title">开大开小</div>
      <div class="integral_block_img"><img src="@/assets/imgs/线性骰子.png"></div>
      <div class="integral_block_desc">买定离手，来猜大小！</div>
    </div>
    <div class="block or5" @click="dialogVisible4=true">
      <div class="integral_block_title">随机密码</div>
      <div class="integral_block_img"><img src="@/assets/imgs/密码文件夹.png"></div>
      <div class="integral_block_desc">遇到密码就头疼？我帮你生成！</div>
    </div>

    <el-dialog class="dialogArea" :visible.sync="dialogVisible1" title="吃什么我帮你决定!" width="30%">
      <div class="vueBox">
        <div class="marquee">
          <div class="marquee_box">
            <ul class="marquee_list" :class="{marquee_top:animate}">
              <li v-for="(item, index) in marqueeList" :key="index">
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" round @click="stop">停止</el-button>
        <el-button type="primary" round @click="reStart">重新决定</el-button>
        <el-button type="info" round @click="dialogVisible1=false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog class="dialogArea" :visible.sync="dialogVisible2" title="做不做我帮你决定!" width="30%">
      <div class="do-box">
        <div class="do">
          <div class="do-item">
            <div class="do-start">
              <div class="box" @click="startDo" v-if="isStart===1">
                <p><b>GO!</b></p>
                <p>不再犹豫</p>
              </div>
            </div>
            <ul>
              <li v-for="(item,i) in list" :key="i" :class="i==index?'on':''">
                <div class="box" >
                  <p><img :src="require('../../assets/imgs/' + item.img )"></p>
                  <p>{{item.title}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--弹窗-->
        <div class="mask" v-if="showToast"></div>
        <div class="do-alert" v-if="showToast">
          <div v-if="[0,2,4,6].includes(index)">
            <h1>干！</h1>
          </div>
          <div v-if="[1,3,5,7].includes(index)">
            <h1>慢！</h1>
          </div>
          <p><img :src="require('../../assets/imgs/' +  list[index].dialogImg)"></p>
          <div class="btnsave" @click="showToast=false">确定</div>
        </div>
      </div>
    </el-dialog>

    <el-dialog class="dialogArea" :visible.sync="dialogVisible3" title="开大开小!" width="30%">
      <div class="t-box">
        <div class="t-pic t-p1"><img class="t-box-img" src="../../../static/images/6-point.png"></div>
        <div class="t-pic t-p2"><img class="t-box-img" src="../../../static/images/6-point.png"></div>
        <div class="t-pic t-p3"><img class="t-box-img" src="../../../static/images/6-point.png"></div>
        <el-button id="t-btn" type="success" round @click="change">摇一摇</el-button>
        <p id="t-text"></p>
      </div>
    </el-dialog>

    <el-dialog class="dialogArea" :visible.sync="dialogVisible4" title="密码我帮你生成!" width="30%">
      <div class="vueBox">
        <p class="password-p">期望的密码长度：</p>
        <el-input v-model="listQuery.length" placeholder="密码长度（默认长度10）" clearable style="width: 360px" class="filter-item" @keyup.enter.native="createPassword" />
        <div v-if="password != ''" class="createPassword">
          <p class="password-p">密码：</p>
          <p class="password-p">{{password}}</p>
        </div>
      </div>
      <div slot="footer">
        <el-button type="primary" round @click="createPassword">生成密码</el-button>
        <el-button type="info" round @click="dialogVisible4=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getPassword} from '@/api/password'

export default {
  name: 'helpDecide',
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      dialogVisible4: false,
      animate: false,
      polling: 0,
      marqueeList: [
        {name: '火锅'}, {name: '烧烤'}, {name: '炒饭'}, {name: '面条'},{name: '麻婆豆腐'},{name: '蚂蚁上树'},{name: '酸菜鱼'},{name: '纸包鸡'},{name: '夫妻肺片'},{name: '鱼香肉丝'},{name: '焖大虾'},{name: '梅菜扣肉'},{name: '冒菜'},{name: '水饺'},
        {name: '卤肉饭'}, {name: '牛肉面'}, {name: '锅贴'}, {name: '牛肉'},{name: '黄焖鸡'},{name: '烧麦'},{name: '煲仔饭'},{name: '杂粮粥'},{name: '可乐鸡翅'},{name: '红烧肉'},{name: '凉粉'},{name: '大盘鸡'},{name: '炸酱面'},{name: '石锅拌饭'},
      ],
      list:[
        {img: '对号.png', dialogImg: 'just-do-it.jpeg', title:'做'},
        {img: '叉号.png', dialogImg: '三思而行.jpeg', title:'不做'},
        {img: '对号.png', dialogImg: 'just-do-it.jpeg', title:'做'},
        {img: '叉号.png', dialogImg: '三思而行.jpeg', title:'不做'},
        {img: '对号.png', dialogImg: 'just-do-it.jpeg', title:'做'},
        {img: '叉号.png', dialogImg: '三思而行.jpeg', title:'不做'},
        {img: '对号.png', dialogImg: 'just-do-it.jpeg', title:'做'},
        {img: '叉号.png', dialogImg: '三思而行.jpeg', title:'不做'},
      ],
      showToast: false,
      index: -1,
      isStart: 1,
      click: true, // 是否已经开始转动
      times: 0, // 转动次数
      count: 8, // 总共有多少位置
      timer: 0,
      speed: 200, // 初始转速
      cycle: 50, // 转动多少圈才能弹窗
      lastSite: -1, // 最终停下的位置
      dice1: 0,
      dice2: 0,
      dice3: 0,
      sum: 0,
      t: 0,
      password: '',
      listQuery: {
        base: undefined,
        length: undefined
      }
    }
  },
  created () {
    this.polling = setInterval(this.showMarquee, 200)
  },
  beforeDestroy () {
    clearInterval(this.polling)
  },
  methods: {
    showMarquee() {
      this.animate = true
      setTimeout(() => {
        this.marqueeList.push(this.marqueeList[0])
        this.marqueeList.shift()
        this.animate = false
      }, 200)
    },
    stop () {
      clearInterval(this.polling)
    },
    reStart() {
      this.polling = setInterval(this.showMarquee, 200)
    },
    startDo () {
      if (!this.click) return
      this.startRoll()
    },
    // 开始转动
    startRoll() {
      this.times += 1
      this.oneRoll()
      if (this.times > this.cycle + 10 && this.lastSite === this.index){
        clearTimeout(this.timer)
        this.lastSite = -1
        this.times = 0
        this.speed = 200
        this.click = true
        let that = this
        setTimeout(res => {
          that.showToast = true
        }, 500)
      } else {
        if (this.times < this.cycle) {
          this.speed -= 10
        } else if (this.times === this.cycle) {
          this.lastSite = parseInt(Math.random() * 10, 0) || 0
          if (this.lastSite > 7) {
            this.lastSite = 7
          }
        }
        if (this.speed < 40) {
          this.speed = 40
        }
        this.timer = setTimeout(this.startRoll, this.speed)
      }
    },
    oneRoll() {
      let index = this.index // 当前转动到哪个位置
      const count = this.count // 总共有多少位置
      index += 1
      if (index > count -1) {
        index = 0
      }
      this.index = index
    },
    // 摇一摇
    change () {
      let pic = document.getElementsByClassName('t-box-img')
      let btn = document.getElementById('t-btn')
      let p = document.getElementById('t-text')

      const diceImgs = [
        '../../../static/images/1-point.png',
        '../../../static/images/2-point.png',
        '../../../static/images/3-point.png',
        '../../../static/images/4-point.png',
        '../../../static/images/5-point.png',
        '../../../static/images/6-point.png',
      ]

      if (btn.innerText == '摇一摇') {
        this.t = setInterval(function () {
          this.dice1 = Math.floor(Math.random()*6)
          this.dice2 = Math.floor(Math.random()*6)
          this.dice3 = Math.floor(Math.random()*6)
          this.sum =  this.dice1 +  this.dice2 + this.dice3 + 3

          pic[0].src = diceImgs[this.dice1]
          pic[1].src = diceImgs[this.dice2]
          pic[2].src = diceImgs[this.dice3]

          btn.innerText = '停止';
          btn.style.backgroundColor = 'red'

          let bigSmallText = ''
          if (this.sum > 10) {
            bigSmallText = '大！'
          } else {
            bigSmallText = '小！'
          }
          p.innerText = bigSmallText + '所得的点数为：' + this.sum
        }, 100)
      } else {
        clearInterval(this.t)
        btn.innerText = '摇一摇';
        btn.style.backgroundColor = '#2c8d1e'
      }
    },
    createPassword () {
      getPassword(this.listQuery).then(response => {
        if (response.data.code === 20000) {
          this.password = response.data.data
        } else {
          this.$message({
            message: response.data.message,
            type: 'error'
          })
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.help {
  position: relative;
}
.block{
  width: 270px;
  height: 210px;
  float: left;
  margin-right: 30px;
  color:#fff;
  text-align: center;
  .integral_block_title{
    line-height: 80px;
    font-size: 20px;
  }
  .integral_block_img{
    width: 70px;
    height: 70px;
    margin:0 auto;
    margin-bottom: 20px;
    img{
      width: 70px;
      height: 70px;
    }
  }
  .integral_block_desc{
    font-size: 14px;
    width: 200px;
    line-height: 20px;
    margin:0 auto;
  }
}
.block:hover{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.6);
}
.or2{
  background: #ee736e;
}
.or3{
  background: #62cca6;
}
.or4{
  background: #419ee6;
}
.or5{
  background: #db71ec;
}
.marquee {
  width: 100%;
  height: 500px;
  align-items: center;
  color: #3A3A3A;
  background-image: url(../../assets/imgs/chisha.gif);
  display: flex;
  box-sizing: border-box;
}
.marquee_box {
  display: block;
  position: relative;
  width: 90%;
  height: 30px;
  overflow: hidden;
}
.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.marquee_list li {
  height: 30px;
  line-height: 30px;
  font-size: 30px;
  padding-left: 220px;
  // 去掉li标签前面的 . 点
  list-style-type: none;
}
.marquee_list li span {
  padding: 0 2px;
}
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
ul, li {
  list-style-type: none;
}
.do-box {
  overflow: hidden;
}
.do-box .title {
  text-align: center;
  padding: 50px 0;
  font-size: 18px;
  color: #fff;
}
.do {
  animation: changeBg .5s ease infinite;
  overflow: hidden;
  padding: 20px;
  width: 400px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@keyframes changeBg {
  0% {
    background-image:url(../../assets/imgs/k1.png);
  }
  100% {
    background-image:url(../../assets/imgs/k2.png);
  }
}
.do .do-item {
  height: 340px;
  position: relative;
  margin-top: 10px;
  margin-left: 10px;
}
.do .do-item ul li {
  width: 33.33333333%;
  position: absolute;
  padding-right: 10px;
}
.do .do-item ul li:nth-child(2) {
  left: 33.33333333%;
}
.do .do-item ul li:nth-child(3) {
  left: 66.66666666%;
}
.do .do-item ul li:nth-child(4) {
  left: 66.66666666%;
  top: 110px;
}
.do .do-item ul li:nth-child(5) {
  left: 66.66666666%;
  top: 220px;
}
.do .do-item ul li:nth-child(6) {
  left: 33.33333333%;
  top: 220px;
}
.do .do-item ul li:nth-child(7) {
  left: 0;
  top: 220px;
}
.do .do-item ul li:nth-child(8) {
  left: 0;
  top: 110px;
}
.do .do-item ul li .box {
  height: 100px;
  position: relative;
  text-align: center;
  overflow: hidden;
  background: url(../../assets/imgs/bg2.png) no-repeat center;
  background-size: 100% 100%;
}
.do .do-item ul li .box img {
  display: block;
  height: 50px;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 5px;
}
.do .do-item ul li .box p {
  color: #708ABF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.do .do-item ul li.on .box {
  background: url(../../assets/imgs/bg1.png) no-repeat center;
  background-size: 100% 100%;
}
.do .do-item ul li.on .box p {
  color: #fff;
}
.do .do-item .do-start {
  position: absolute;
  left: 33.33333333%;
  width: 33.33333333%;
  top: 110px;
  padding-right: 10px;
}
.do .do-item .do-start .box {
  height: 100px;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  background: url(../../assets/imgs/bg1.png) no-repeat center;
  background-size: 100% 100%;
}
.do .do-item .do-start .box p b {
  font-size: 40px;
  margin-top: 16px;
  margin-bottom: 15px;
  line-height: 30px;
  display: block;
}
.do .do-item .do-start .box:active {
  opacity: 0.7;
}
.do .do-item .do-start .box.gray {
  background: url(../../assets/imgs/bg3.png) no-repeat center;
  background-size: 100% 100%;
}
.do .do-item .do-start .box.gray p {
  color: #708ABF;
  font-weight: bold;
}
.mask {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  overflow: hidden;
  z-index: 222;
  top: 0;
  left: 0;
}
.do-alert {
  max-width: 400px;
  text-align: center;
  z-index: 10000;
  border-radius: 10px;
  background: #fff;
  padding: 20px;
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
.do-alert h1 {
  font-size: 18px;
  font-weight: bold;
  color: #D92B2F;
}
.do-alert img {
  display: block;
  height: 120px;
  margin: 0 auto;
}
.do-alert h2 {
  font-weight: normal;
  color: #D92B2F;
  font-size: 15px;
  padding-top: 15px;
}
.do-alert p {
  color: #666;
  font-size: 16px;
  padding-top: 5px;
}
.do-alert .btnsave {
  border-radius: 3px;
  box-shadow: none;
  height: 40px;
  cursor: pointer;
  line-height: 40px;
  color: #fff;
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(213,60,63,1) 0%, rgba(201,20,24,1) 100%);
  font-size: 16px;
}
.t-box{
  width: 300px;
  height: 350px;
  margin: 100px auto;
  position: relative;
}
.t-pic{
  width: 100px;
  height: 100px;
}
.t-p1{
  position: absolute;
  top: 50px;
  left: 100px;
}
.t-p2{
  position: absolute;
  top: 180px;
  left: 40px;
}
.t-p3{
  position: absolute;
  top: 180px;
  right: 40px;
}
.t-box-img{
  width: 100%;
  height: 100%;
}
#t-btn{
  width: 100px;
  height: 36px;
  left: 100px;
  margin-top: 360px;
  position: absolute;
  background-color: #2c8d1e;
  //bottom: 0;
  //z-index: 2;
  // 鼠标指针变小手
  cursor: pointer;
}
#t-text{
  width: 250px;
  height: 30px;
  position: absolute;
  margin-left: 60px;
  font-size: 22px;
}
.createdPassword {
  margin-top: 30px;
}
</style>
